<!-- 炫彩主页 -->

<template>
  <div class="HomeColorful flexCC flexWrap full">
    <div v-for="major in CORE.MENU.TREE" :key="major.id" class="flexCC" :style="majorStyle" @click="toClick(major)">
      <img :src="CORE.image(major.icon)" />
    </div>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'

// ============================== 导出组件 ============================== //

export default CORE.extend({}, {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'HomeColorful',

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 一级菜单样式
     */
    majorStyle() {
      const len = CORE.MENU.TREE.length || 1
      const width = (95 / len).toFixed(1) - 0.6
      return { width: `${width}vw` }
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 点击
     */
    toClick({ describe: name }) {
      this.$router.push({ name })
    },
  },
})
</script>

<style lang="scss">
@import './index.scss';
</style>
